<template>
  <el-row>
	  <!-- 菜单栏 -->
    <el-col :span="4"><div class="grid-content ep-bg-purple" />
	<title>手机银行</title>
	</el-col>
	
	<!-- 搜索图标 -->
    <el-col :span="12"><div class="grid-content ep-bg-purple-light" />
	 <input type="text" name="query" placeholder="请输入搜索关键词"><button type="submit"><el-icon><Search /></el-icon></button>
	</el-col>
	
    <el-col :span="4"><div class="grid-content ep-bg-purple" />
	<!-- 通知图标 -->
	<el-icon><BellFilled /></el-icon>
	</el-col>
	
	<!-- 更多图标 -->
	<el-col :span="4"><div class="grid-content ep-bg-purple" />
	<el-dropdown>
		<!-- 下拉图标 -->
      <el-button type="primary">
        <el-icon><Expand /></el-icon>
      </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>设置1</el-dropdown-item>
          <el-dropdown-item>设置2</el-dropdown-item>
          <el-dropdown-item>设置3</el-dropdown-item>
          <el-dropdown-item>设置4</el-dropdown-item>
          <el-dropdown-item>设置5</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
	
	</el-col>
	
  </el-row>
</template>

<script setup>
import { ref } from 'vue';
</script>

<style>
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>